<script setup lang="ts">
import { useRoute } from 'vue-router'
import { NButton, NImage } from 'naive-ui'
import BackPng from '@/assets/images/back.png'
import useRouteReplace from '@/hooks/useRouteReplace'
import FixedAction from '@/components/FixedAction.vue'

import ClueIsBind from './ClueIsBind.vue'
import RegisteredDetail from './RegisteredDetail.vue'
import LatestApplyDetail from './LatestApplyDetail.vue'
import { default as NotRequired } from './ClueIsBind.vue'

const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)

/**
 * 未鉴定
 * 无需鉴定
 * 鉴定结束
 * 鉴定中
 */
const isUnIdentify = route.query.isUnIdentify === 'true'
const isIdentifying = route.query.isIdentifying === 'true'
const isIdentifyEnd = route.query.isIdentifyEnd === 'true'
const isNotRequired = route.query.isNotRequired === 'true'
</script>

<template>
  <div class="batch-detail">
    <ClueIsBind v-if="isUnIdentify" />
    <!-- 绑定完线索的批次详情 -->
    <LatestApplyDetail v-else-if="isIdentifying" />
    <!-- 鉴定申请完之后的详情 -->
    <RegisteredDetail v-else-if="isIdentifyEnd" />
    <!-- 鉴定登记完之后的详情 -->
    <NotRequired
      isNoteRequired
      v-else-if="isNotRequired"
    />
    <!-- 无需鉴定之后的详情 -->
  </div>

  <FixedAction>
    <div class="batch-detail-buttons">
      <NButton
        style="width: 78px; color: #5fb17f"
        ghost
        @click="routeReplace"
      >
        <template #icon>
          <NImage
            :src="BackPng"
            style="width: 50rem; height: 50rem"
            preview-disabled
          ></NImage>
        </template>
        返回
      </NButton>
    </div>
  </FixedAction>
</template>

<style lang="scss">
.batch-detail {
  min-height: 100%;
  padding: 15rem 0 110rem;
  background-color: #f0efee;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }
}
</style>
